<template>
	<div class="base-drawer">
		<el-drawer
			v-model="drawerVisible"
			:disabled="disabled"
			:append-to-body="true"
            :direction="direction"
			destroy-on-close
			:size="width"
			:show-close="false"
			:before-close="close"
			v-loading="loading"
		>
			<template #header>
				<slot name="header">
					<span class="el-drawer__title">{{ title }}</span>
				</slot>
				<div class="el-drawer__close-btn">
					<button aria-label="close" type="button" @click="close">
						<SvgIcon name="ele-Close" class="el-drawer__close" size="16" />
					</button>
				</div>
			</template>
			<div class="el-drawer__body !p-[15px]" v-loading="drawerLoading">
				<slot></slot>
			</div>
			<template #footer v-if="showFooter">
				<slot name="footer">
					<span class="drawer_footer">
						<el-button @click="handleCancel">{{ cancelText }}</el-button>
                        <el-button type="primary" @click="handleSave">{{ saveText }}</el-button>
					</span>
				</slot>
			</template>
		</el-drawer>
	</div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue';

const props = defineProps({
	// 标题
	title: {
		type: String,
		default: '',
	},
	// 显示尾部
	showFooter: {
		type: Boolean,
		default: true,
	},
	// 取消按钮
	cancelText: {
		type: String,
		default: '取 消',
	},
	// 确认按钮
	saveText: {
		type: String,
		default: '确 认',
	},
    // 打开方向 rtl / ltr / ttb / btt
	direction: {
		type: String,
		default: 'rtl',
	},
	// 是否禁用
	disabled: {
		// 是否禁用
		type: Boolean,
		default: false,
	},
	// 宽度
	width: {
		type: String,
		default: 'auto',
	},
	// 加载中
	loading: {
		type: Boolean,
		default: false,
	},
});

const drawerVisible = ref(false);

const drawerLoading = ref(props.loading);

const emit = defineEmits(['confirm', 'cancel', 'close', 'open']);

const handleCancel = () => {
	emit('cancel');
	close();
};

const handleSave = () => {
	emit('confirm');
};

const loading = (val:boolean) => {
	drawerLoading.value = val;
};

const close = () => {
	drawerVisible.value = false;
	nextTick(() => {
		emit('close');
	});
};

const open = () => {
	if (props.disabled) return;
	drawerVisible.value = true;
	emit('open');
};

defineExpose({
	loading,
	open,
	close,
});
</script>


<style lang="scss" scoped>
.drawer_footer {
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0;
    border-top: 1px solid var(--el-border-color);
}
</style>
